<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>兰芝</title>
	<meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div class="laneige">  
        <div class="music"><audio id="audio" src="file/music.mp3" loop></audio></div>
		<div class="screen_inner">
			<!-- 加载 -->
			<div class="loading">
				<div class="loading_inner">
					<div class="loading_img"></div>
					<div class="loading_y">
						<i class="t_l"></i>
						<i class="t_a"></i>
						<i class="t_n"></i>
						<i class="t_e"></i>
						<i class="t_i"></i>
						<i class="t_g"></i>
						<i class="t_e2"></i>
						<i class="c_meets"></i>
						<i class="b_f"></i>
						<i class="b_a"></i>
						<i class="b_s"></i>
						<i class="b_h"></i>
						<i class="b_i"></i>
						<i class="b_o"></i>
						<i class="b_n"></i>
					</div>
					<span>0%</span>
				</div>
			</div>
            
			<!-- 画心 -->
            <div class="noshy">
                <img src="img/img29.png" width="240" height="55">
                <img src="img/img30.png" width="240" height="55">
                <img src="img/img29.png" width="240" height="55">
                <img src="img/img30.png" width="240" height="55">
                <img src="img/img29.png" width="240" height="55">
                <img src="img/img30.png" width="240" height="55">
                <img src="img/img29.png" width="240" height="55">
                <img src="img/img30.png" width="240" height="55">
                <img src="img/img29.png" width="240" height="55">
                <img src="img/img30.png" width="240" height="55">
                <img src="img/img29.png" width="240" height="55">
                <img src="img/img30.png" width="240" height="55">
                <img src="img/img29.png" width="240" height="55">
                <img src="img/img30.png" width="240" height="55">
                <img src="img/img29.png" width="240" height="55">
                <img src="img/img30.png" width="240" height="55">
                <img src="img/img29.png" width="240" height="55">
                <img src="img/img30.png" width="240" height="55">
                <img src="img/img29.png" width="240" height="55">
                <img src="img/img30.png" width="240" height="55">
                <img src="img/img29.png" width="240" height="55">
                <img src="img/img30.png" width="240" height="55">
                <img src="img/img29.png" width="240" height="55">
                <img src="img/img30.png" width="240" height="55">
                <img src="img/img29.png" width="240" height="55">
                <img src="img/img30.png" width="240" height="55">
                <img src="img/img29.png" width="240" height="55">
                <img src="img/img30.png" width="240" height="55">
                <img src="img/img29.png" width="240" height="55">
                <img src="img/img30.png" width="240" height="55">
                <img src="img/img29.png" width="240" height="55">
                <img src="img/img30.png" width="240" height="55">
                <img src="img/img29.png" width="240" height="55">
                <img src="img/img30.png" width="240" height="55">
                <img src="img/img29.png" width="240" height="55">
                <img src="img/img30.png" width="240" height="55">
                <img src="img/img29.png" width="240" height="55">
                <img src="img/img30.png" width="240" height="55">
                <img src="img/img29.png" width="240" height="55">
                <img src="img/img30.png" width="240" height="55">
                <img src="img/img29.png" width="240" height="55">
                <img src="img/img30.png" width="240" height="55">
                <img src="img/img29.png" width="240" height="55">
                <img src="img/img30.png" width="240" height="55">
            </div>
            <div class="noshy_bottom">
                <img src="img/img31.png" width="214" height="17.5">
            </div>
            <div class="darling">
                <img src="img/darling1.png" width="260" height="35">
                <img src="img/darling2.png" width="260" height="35">
                <img src="img/darling3.png" width="260" height="35">
                <img src="img/darling4.png" width="260" height="35">
                <img src="img/darling5.png" width="260" height="35">
                <img src="img/darling1.png" width="260" height="35">
                <img src="img/darling2.png" width="260" height="35">
                <img src="img/darling3.png" width="260" height="35">
                <img src="img/darling4.png" width="260" height="35">
                <img src="img/darling5.png" width="260" height="35">
                <img src="img/darling1.png" width="260" height="35">
                <img src="img/darling2.png" width="260" height="35">
                <img src="img/darling3.png" width="260" height="35">
                <img src="img/darling4.png" width="260" height="35">
                <img src="img/darling5.png" width="260" height="35">
                <img src="img/darling1.png" width="260" height="35">
                <img src="img/darling2.png" width="260" height="35">
                <img src="img/darling3.png" width="260" height="35">
                <img src="img/darling4.png" width="260" height="35">
                <img src="img/darling5.png" width="260" height="35">
                <img src="img/darling1.png" width="260" height="35">
                <img src="img/darling2.png" width="260" height="35">
                <img src="img/darling3.png" width="260" height="35">
                <img src="img/darling4.png" width="260" height="35">
                <img src="img/darling5.png" width="260" height="35">
                <img src="img/darling1.png" width="260" height="35">
                <img src="img/darling2.png" width="260" height="35">
                <img src="img/darling3.png" width="260" height="35">
                <img src="img/darling4.png" width="260" height="35">
                <img src="img/darling5.png" width="260" height="35">
                <img src="img/darling1.png" width="260" height="35">
                <img src="img/darling2.png" width="260" height="35">
                <img src="img/darling3.png" width="260" height="35">
                <img src="img/darling4.png" width="260" height="35">
                <img src="img/darling5.png" width="260" height="35">
                <img src="img/darling1.png" width="260" height="35">
                <img src="img/darling2.png" width="260" height="35">
                <img src="img/darling3.png" width="260" height="35">
                <img src="img/darling4.png" width="260" height="35">
                <img src="img/darling5.png" width="260" height="35">
                <img src="img/darling1.png" width="260" height="35">
                <img src="img/darling2.png" width="260" height="35">
                <img src="img/darling3.png" width="260" height="35">
                <img src="img/darling4.png" width="260" height="35">
                <img src="img/darling5.png" width="260" height="35">
                <img src="img/darling1.png" width="260" height="35">
                <img src="img/darling2.png" width="260" height="35">
                <img src="img/darling3.png" width="260" height="35">
                <img src="img/darling4.png" width="260" height="35">
                <img src="img/darling5.png" width="260" height="35">
            </div>
            <div class="darling_bottom">
                <img src="img/darling_bottom.png"  width="275" height="18">
            </div>
            <div class="play"></div>
            <div class="play_bottom"></div>
			<div class=" screen1">
				<div class="blink_off"></div>
				<div class="blink_on">
                    <img src="img/img4.png">
                    <img src="img/img4_1.png">
                </div>
				<div class="blink_shad"></div>
				<div class="glitter"></div>
				<div class="glitter_light"></div>
<!--
				<div class="sc_text_l"></div>
				<div class="sc_text_r"></div>
-->
                <div class="sc_text"></div>
                <div class="sc_text2_l"></div>
				<div class="sc_text2_r"></div>
                <div class="sc_text3_l"></div>
				<div class="sc_text3_r"></div> 
				<div class="bb">
					<div class="n1"></div>
					<div class="n2"></div>
					<div class="n3"></div>
					<div class="n4"></div>
				</div>
				<div class="star1"></div>
				<div class="star2"></div>
				<div class="star3"></div>
			</div>

			<div class="screen screen2">
				<div class="bb_on"></div>
                <!--多个bb盒子打开-->
                <div class="a">
                    <img src="img/a/1.jpg">
                    <img src="img/a/2.jpg">
                    <img src="img/a/3.jpg">
                    <img src="img/a/4.jpg">
                    <img src="img/a/5.jpg">
                    <img src="img/a/6.jpg">
                    <img src="img/a/7.jpg">
                    <img src="img/a/8.jpg">
                    <img src="img/a/9.jpg">
                    <img src="img/a/10.jpg">
                    <img src="img/a/11.jpg">
                    <img src="img/a/12.jpg">                  
                    <img src="img/a/13.jpg">
                    <img src="img/a/14.jpg">
                    <img src="img/a/15.jpg">
                    <img src="img/a/16.jpg">
                    <img src="img/a/17.jpg">
                    <img src="img/a/18.jpg">
                    <img src="img/a/19.jpg">
                    <img src="img/a/20.jpg">
                    <img src="img/a/21.jpg">
                    <img src="img/a/22.jpg">
                    <img src="img/a/23.jpg">
                    <img src="img/a/24.jpg">
                    <img src="img/a/25.jpg">
                </div>                
			</div>

			<div class="screen screen3">
				<div class="text0"></div>
				<div class="text3"></div>
				<div id="WxMomentVideo"></div>
				<div class="video1">
                    <img src="img/pointer.jpg" width="275" height="155">
                </div>
				<div class="text4">
					<div class="tt1"></div>
					<div class="tt2"></div>
					<div class="tt3"></div>
					<div class="tt4"></div>
					<div class="tt5"></div>
					<div class="tt6"></div>
					<div class="tt7"></div>
					<div class="tt8"></div>
					<div class="x1"></div>
					<div class="x2"></div>
				</div>
				<div id="yue" class="text5"></div>
				<div id="rule_btn" class="text6"></div>
			</div>
			<!-- 表单 -->
			<div class="screen screen4">
				<div class="form">
                    <div class="t2"></div>
					<div class="t1"></div>					
					<div class="row">
						<label class="l_name">姓名</label>
						<input id="name" type="text" value="">
					</div>
					<div class="row">
						<label class="l_phone">手机</label>
						<input id="phone" type="text" value="">
					</div>
                    <div class="row">
						<label class="l_city">城市</label>
						<span class="select_val">123</span>
						<select id="guitai">
							<option></option>
							<option>上海</option>
							<option>北京</option>
							<option>深圳</option>
							<option>南京</option>
						</select>
						<i class="select_i"></i>
					</div>
					<div class="row">
						<label class="l_guitai">柜台</label>
						<span class="select_val">123</span>
						<select id="guitai">
							<option></option>
							<option>1</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
						</select>
						<i class="select_i"></i>
					</div>
                    <div class="warning">
                        <input type="checkbox" checked>
                        <label></label>
                    </div>
					<div class="submit"></div>
					<div class="pro">
						<div class="p1"></div>
						<div class="p2"></div>
					</div>
				</div>
			</div>
			<!-- 提交后的结束页面1 -->
			<div class="screen screen5 screen5_1">
				<div class="s1"></div>
				<div class="s2"></div>
				<div class="s3"></div>
				<div class="bb_on"></div>
				<div class="chc"></div>
				<div class="kiss"></div>
				<div class="xin4"></div>
				<div class="xin5"></div>
                <div class="QR">
                    <a href="#"><img src="img/QR.png" width="150" height="150"></a>
                </div>
			</div>
            <!-- 提交后的结束页面2 -->
            <div class="screen screen5 screen6" style="display:none;">
				<div class="s1"></div>
				<div class="s2"></div>
				<div class="s3"></div>
				<div class="bb_on"></div>
				<div class="chc"></div>
				<div class="kiss"></div>
				<div class="xin4"></div>
				<div class="xin5"></div>
                <div class="QR">
                    <a href="#"><img src="img/QR.png" width="150" height="150"></a>
                </div>
			</div>
            <!--BBC和水滴唇釉互动-->
<!--
            <div class="screen screen6">
				<div class="screen6_bbc">
                </div>
			</div>
-->
			<!-- 规则 -->
			<div class="rule">
				<div class="rule_img"><div id="close_btn" class="close"></div></div>
			</div>
			
		</div>
	</div>
<script src="http://cdnjs.gtimg.com/cdnjs/libs/wxmoment/0.0.2/wxmoment.min.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery.lazylinepainter-1.5.1.js"></script>
<script type="text/javascript"> 
//	var audio = document.getElementById('audio');
//	var volume = audio.volume; 
//	var audioInterval;
//	var ato = true;
//	$(".music").click(function(){
//		if(!ato) return;
//		ato = false;
//		if(audio.paused){
//			audio.volume = 0;
//			audio.play();
//			audioInterval = setInterval(function(){
//				audio.volume += 0.1; 
//				if(audio.volume > 0.9){
//					clearInterval(audioInterval);
//					$(".music").removeClass("off");
//					ato = true
//				}
//			}, 100);
//			return;
//		}
//		audio.volume = 1;
//		$(".music").addClass("off");
//		audioInterval = setInterval(function(){
//			audio.volume -= 0.1; 
//			if(audio.volume < 0.1){
//				audio.pause();
//				clearInterval(audioInterval);
//				ato = true
//			}
//		}, 100);
//	});
     var sj_music = true;
      var audio = document.getElementById("audio");
      
    
    
	var svgData = {
		"blink_svg" :
		{
			"strokepath" :
			[
				{   "path": "M359,201.8c0.4-27.7,1.6-57.5-10-76c-6.5-8.9-37.8-6.5-53-6c-9.3,2.4-18.7,4.7-28,7c-24.6,10.2-48.3,36.4-54,65c-0.7,0.3-1.3,0.7-2,1c-25.1-34.9-60.6-60.1-122-59c-21.7,22.6-14.7,81.1-2,107c24.9,51,71.3,83.3,102,129c13.1,19.5,29.2,43.3,18,76c0,1,0,2,0,3c17.5-2.899,59.3-48.7,66-64c40.8,0.4,65.2-6.7,74-47c18.6,13.5,59.6,35.9,81,7C466.1,294.8,422.8,190.6,359,201.8z",
					"duration": 1800,
					"strokeColor": '#231815',
					"strokeWidth": 8
				},
					
					
			],
			"dimensions" : { "width": 600, "height":600 }
		}
	}
	$('#blink_svg').lazylinepainter({
			'svgData' : svgData,
			'strokeWidth':7,
			'strokeColor':'#231815',
			'onComplete' : function(){
				console.log('>> onComplete');
			},
			'onStart' : function(){
				console.log('>> onStart');
			}
		}
	)
	var state = 'paint';
//	var basePath = "http://waynever.sinaapp.com/laneige/";
	var basePath = "";
	var loader = new WxMoment.Loader();
	//声明资源文件列表
	var fileList = ['img/bg.jpg','img/loading_n.png', 'img/loading_y.png', 'img/img1.png',  'img/img3.png', 'img/img4.png', 'img/img5.png', 'img/img6.png', 'img/img7.png','img/img10.png', 'img/img11.png', 'img/img12.png', 'img/img13.png', 'img/img14.png','img/img15.png','img/img16.png','img/img17.png', 'img/img18.png','img/img19.png','img/icon.png','img/rule.jpg','img/a/1.jpg','img/a/2.jpg','img/a/3.jpg','img/a/4.jpg','img/a/5.jpg','img/a/6.jpg','img/a/7.jpg','img/a/8.jpg','img/a/9.jpg','img/a/10.jpg','img/a/11.jpg','img/a/12.jpg','img/a/13.jpg','img/a/14.jpg','img/a/15.jpg','img/a/16.jpg','img/a/17.jpg','img/a/18.jpg','img/a/19.jpg','img/a/20.jpg','img/a/21.jpg','img/a/22.jpg','img/a/23.jpg','img/a/24.jpg','img/a/25.jpg','img/darling1.png','img/darling2.png','img/darling3.png','img/darling4.png','img/darling5.png','img/img29.png','img/img30.png',];
	for (var i = 0; i < fileList.length; i++) {
		loader.addImage(basePath + fileList[i]);
	}
	//进度监听
	loader.addProgressListener(function (e) {
		var percent = Math.round((e.completedCount / e.totalCount) * 100);
		$(".loading_inner span").text(percent+'%');
		$(".loading_y").css({width:percent+'%'});
		//console.log("当前加载了", percent, "%");
		//在这里做 Loading 页面中百分比的显示
	});
	//加载完成
	loader.addCompletionListener(function () {
		//可以在这里隐藏 Loading 页面开始进入主内容页面
		//console.log("加载完成");
        setTimeout(function(){
          audio.play();
        },10);
		setTimeout(function(){
			$(".loading_img").hide();
			$(".loading").addClass("hide");
			setTimeout(function(){
				$(".loading").hide();
				$(".screen1").show().addClass('on');
                $(".music").click(function(){
                      if(!audio.paused){
                        $(".music").addClass("off");
                        audio.pause();
                        sj_music = false;
                      }else{            
                        $(".music").removeClass("off");
                        audio.play();
                        sj_music = true;
                      }          
                  });
                
				setTimeout(function(){
					$('#blink_svg').lazylinepainter(state);
				},600);
                setTimeout(function(){
                    zhazha();
                },4500);
                setTimeout(function(){
                    $(".noshy").fadeIn();
                    $(".noshy_bottom").fadeIn();
                    noshy();
                },6800);
                setTimeout(function(){
                    $(".noshy").hide();
                    $(".noshy_bottom").hide();
                    $(".darling").fadeIn();
                    $(".darling_bottom").fadeIn();
                    darling();
                },8800);
                setTimeout(function(){
                    $(".darling").hide();
                    $(".darling_bottom").hide(); 
                    $(".play").fadeIn();
                    $(".play_bottom").fadeIn();
                },10000);
                setTimeout(function(){
                    $(".play").hide();
                    $(".play_bottom").hide();
                },11000);
                 setTimeout(function(){
                    zhazha();                   
                },7000);
				setTimeout(function(){
					$(".screen1").addClass('hide');                    
					setTimeout(function(){
						$(".screen1").hide();                        
					},1000);
					$(".screen2").show().addClass('on');
                    setTimeout(function(){
                        setTimeout(function(){
                            screen6_bbc();
                            setTimeout(function(){
                                bbc_logo();
                                setTimeout(function(){
                                    $(".screen2").addClass('hide');
                                    setTimeout(function(){
                                        $(".screen2").hide();                                        
                                    },100);
                                    setTimeout(function(){
                                        $(".screen3").show().addClass('on');                                        
                                    },200);						
                                },50);
                            },1800);
                        },1300);
                    },500);
                    
//					setTimeout(function(){
//						$(".screen2").addClass('hide');
//						setTimeout(function(){
//							$(".screen2").hide();
//						},200);
//                        setTimeout(function(){
//                            $(".screen3").show().addClass('on');
//                        },500);						
//					},10000);
				},9400);
			},1800);
		},400);
	});
	//启动加载
	loader.start();
	
	var video = new WxMoment.Video({
		//请联系接口人确认视频清晰度已调至高清版本
		//如果要定制“播放按钮”的样式，请使用 CSS 覆盖 .tvp_overlay_play 和 .tvp_button_play 即可

		vid: "k0162fcvlf2", //视频 vid 取自视频地址：http://v.qq.com/page/a/t/t/a0016gys8ct.html
		pic: "img/pointer.jpg", //设置视频默认缩略图
		oninited: function () {
			//播放器在视频载入完毕触发
		},
		onplaying: function () {
			//播放器真正开始播放视频第一帧画面时
		},
		onpause: function () {
			//播放器触发暂停时，目前只针对HTML5播放器有效
		},
		onresume: function () {
			//暂停后继续播放时触发
		},
		onallended: function () {
			//播放器播放完毕时
		},
		onfullscreen: function (isfull) {
			//onfullscreen(isfull) 播放器触发全屏/非全屏时，参数isfull表示当前是否是全屏
		}
	});

	//可以通过以下方式控制播放/暂停
	//video.getPlayer().paly();
	//video.getPlayer().pause();

	//以下可以拉起iOS全屏播放
	//video.getPlayer().enterFullScreen();
	
	//活动规则按钮
	$('#rule_btn').click(function(){
		$(".rule").show().removeClass("hide").addClass('on');
        $("#WxMomentVideo").hide();
        $(".video1").show();
	});
	//活动规则关闭
	$('#close_btn').click(function(){
		$(".rule").addClass('hide').removeClass("on");
        
        $(".video1").hide();
		setTimeout(function(){
			$(".rule").hide();
            $("#WxMomentVideo").show();
        $("#WxMomentVideo").css({opacity:1});            
		},1000)
	});
	//抢险时尚，你敢约吗
	$("#yue").click(function(){
		$(".screen3").addClass('hide');
		setTimeout(function(){
			$(".screen3").hide();
		},600)
		$(".screen4").show().addClass('on');
	});
	//表单select选值
	$(".select_val").text($("#guitai").val());
	$("#guitai").change(function(){
		$(".select_val").text($(this).val());
	});
	$(".submit").click(function(){
		$(".screen4").addClass('hide');
		setTimeout(function(){
			$(".screen4").hide();
		},600);
		$(".screen5").show().addClass('on');
	});
    $(".screen4 div.t2").click(function(){
        $(".screen4").hide();
        $(".screen3").removeClass("hide").show();
    });
//    眼睛眨眨
    function zhazha(){
        setTimeout(function(){
//            $(".blink_on").css('background-image',"url(img/img4_1.png)");
            $(".blink_on img").eq(1).show().siblings("img").hide();
        },1000);
        setTimeout(function(){
//            $(".blink_on").css('background-image',"url(img/img4.png)");
            $(".blink_on img").eq(0).show().siblings("img").hide();
        },1400);
        setTimeout(function(){
//            $(".blink_on").css('background-image',"url(img/img4_1.png)");
            $(".blink_on img").eq(1).show().siblings("img").hide();
        },1550);
        setTimeout(function(){
//            $(".blink_on").css('background-image',"url(img/img4.png)");
            $(".blink_on img").eq(0).show().siblings("img").hide();
        },1900);
    }
    
    
//    bb盒子打开
//    function bb_open(){
//        var s1 = 10;
//        var i1 = s1;
//        var m1 = 1;
//        var set1 = null;
//               $(".bb_open").fadeIn(); 
//               set1 = setInterval(function(){
//                m1 = parseInt(i1/s1);
//                        console.log("i: " + i1 + ", m: " + m1);
//                if(m1<36){
//                    $(".bb_open img").eq(m1).show().siblings("img").hide();
//                    i1++;}
//            },1);
//    }
    
//    bb唇膏依次展开
    function screen6_bbc(){
        var s2 = 10;
        var i2 = s2;
        var m2 = 1;
        var set2 = null;
            $(".a").fadeIn(100);
            setTimeout(function(){
                set2 = setInterval(function(){
                m2 = parseInt(i2/s2);
                        console.log("i: " + i2 + ", m: " + m2);
                if(m2<26){
                    $(".a img").eq(m2).show().siblings("img").hide();
                    i2++;}
               },3);                 
            },100); 
//        clearInterval(set2);
    }
    //logo从扩散到聚集
    
    function bbc_logo(){
    var s3 = 10;
    var i3 = s3;
    var m3 = 1;    
    var set3 = null;
        $(".a").fadeOut("slow");
        $(".play").hide();
        $(".play2").hide(); 
        setTimeout(function(){
            set3 = setInterval(function(){
           	m3 = parseInt(i3/s3);
			    	console.log("i: " + i3 + ", m: " + m3);
            if(m3<23){
                $(".b img").eq(m3).show().siblings("img").hide();
                i3++;}
           },10); 
            
        },100);
        clearInterval(set3);
    }
    
//    darling
    function darling(){
    var s3 = 10;
    var i3 = s3;
    var m3 = 1;    
    var set3 = null;
        setTimeout(function(){
            set3 = setInterval(function(){
           	m3 = parseInt(i3/s3);
			    	console.log("i: " + i3 + ", m: " + m3);
            if(m3<23){
                $(".darling img").eq(m3).show().siblings("img").hide();
                i3++;}else{
                    m3 = 1;
                }
           },15); 
            
        },100);
        clearInterval(set3);
    }
    
//    noshy
    function noshy(){
    var s3 = 10;
    var i3 = s3;
    var m3 = 1;    
    var set3 = null;
        setTimeout(function(){
            set3 = setInterval(function(){
           	m3 = parseInt(i3/s3);
			    	console.log("i: " + i3 + ", m: " + m3);
            if(m3<23){
                $(".noshy img").eq(m3).show().siblings("img").hide();
                i3++;}else{
                    m3 = 1;
                }
           },15); 
            
        },100);
        clearInterval(set3);
    }
    $(".submit").click(function(){
        $(".screen6").hide();
        setTimeout(function(){
            $(".screen5_1").hide();
            $(".screen6").fadeIn();
        },2000);
    });

</script>
</body>
</html>
